<!--
 * @Date: 2023-04-09 21:44:48
 * @LastEditTime: 2023-08-07 16:09:30
 * 介绍:cell单元格
-->
<script lang="ts" setup>
import { BorderMode, BorderStyle } from "@@/components/types/index";
const props = withDefaults(
  defineProps<{
    bg?: string | boolean;
    active?: boolean;
    shadowColor?: string;
    borderColor?: string;
    borderStyle?: BorderStyle;
    borderWidth?: string;
    borderMode?: BorderMode | BorderMode[];
    shadow?: boolean;
    showRightIcon?: boolean;
  }>(),
  {
    borderColor: "var(--C-T1-O1)",
    borderWidth: "1rem",
    borderStyle: "solid",
    shadowColor: "rgba(0,0,0,0.2)",
    shadow: true,
  }
);
const borderMode = computed(() => {
  const mode =
    typeof props.borderMode === "string"
      ? [props.borderMode]
      : props.borderMode;
  return mode?.map((v) => "Ccell__border-" + v);
});
const bg = computed(() => (!!props.borderMode ? props.bg : true));
</script>

<template>
  <div
    :style="{
      '--Cell-bg': typeof props.bg === 'string' ? props.bg : 'var(--C-B1)',
      '--Ccell-borderColor': props.borderColor,
      '--Ccell-borderStyle': props.borderStyle,
      '--Ccell-borderWidth': props.borderWidth,
      '--SHc': props.shadowColor,
    }"
    :class="[
      borderMode,
      {
        shadow: props.shadow,
        Ccell__active: props.active,
        Ccell__bg: bg,
      },
    ]"
    class="Ccell flex-A-C gap-xs flex-J-SB"
  >
    <div class="flex-A-C gap-xs MR-auto">
      <slot name="left"></slot>
      <slot></slot>
    </div>
    <div class="flex-A-C gap-xs MR-auto ML-auto">
      <slot name="center"></slot>
    </div>

    <div class="flex-A-C gap-xs ML-auto">
      <slot name="right"></slot>
      <van-icon v-if="props.showRightIcon" name="arrow" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Ccell {
  --borderValue: var(--Ccell-borderStyle) var(--Ccell-borderColor)
    var(--Ccell-borderWidth);
}
.Ccell__bg {
  background: var(--Cell-bg);
  border-radius: var(--R-sm);
  padding: var(--gap-sm);
}
.Ccell__active {
  &:active {
    filter: brightness(90%) invert(0.4);
  }
}
.Ccell__border-all {
  border: var(--borderValue);
  padding: var(--gap-sm);
}
.Ccell__border-left {
  border-left: var(--borderValue);
  padding: var(--gap-sm);
}
.Ccell__border-right {
  border-right: var(--borderValue);
  padding: var(--gap-sm);
  border-radius: 0;
}
.Ccell__border-top {
  border-top: var(--borderValue);
  padding: var(--gap-sm) 0;
}
.Ccell__border-bottom {
  border-bottom: var(--borderValue);
  padding: var(--gap-sm) 0;
}
.Ccell__border-none {
  padding: var(--gap-sm) 0;
}
</style>
